<template>
    <div id="o32-entry-record">
        <!-- 表格工具栏 -->
        <div class="table-toolbar">
            <el-form label-width="100px" :model="searchParams">
                <div class="flex-box">
                    <el-form-item label="O32变动对象:" class="width-22">
                        <el-input v-model="searchParams._O32变动对象" placeholder="请输入" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="详细变更内容:" class="width-22">
                        <el-input v-model="searchParams._详细变更内容" placeholder="请输入" size="mini"></el-input>
                    </el-form-item>

                    <el-form-item label="变更人:" class="width-22">
                        <el-input v-model="searchParams._变更人" placeholder="请输入" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="变更日期:" class="width-24">
                        <el-date-picker
                            v-model="searchParams._变更日期start"
                            type="date"
                            size="mini"
                            style="width: calc(50% - 8px)"
                            value-format="yyyyMMdd"
                            format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                        -
                        <el-date-picker
                            v-model="searchParams._变更日期end"
                            type="date"
                            size="mini"
                            style="width: calc(50% - 8px)"
                            value-format="yyyyMMdd"
                            format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="" label-width="0" class="width-10" style="text-align: right">
                        <el-button size="mini" type="primary" @click="handleBtnClick('search')">查询</el-button>
                        <!-- <el-button size="mini" @click="handleBtnClick('export')">导出</el-button> -->
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <!--  -->
        <RiskTable
            ref="risk-table"
            :tableData="tableData"
            :tableConfig="tableConfig"
            :column="columns"
            :paging="paging"
            v-loading="tableLoading"
            :searchParams="searchParams"
            minWidth="110"
            style="height: calc(100% - 100px)"
            @page-change="getTableData"
        >
            <template #_调整大类="{ row }">
                <el-select v-model="row._调整大类" class="long-select" filterable clearable size="mini"> </el-select>
            </template>
            <template #_变更原因="{ row }"> <vxe-input v-model="row._变更原因"></vxe-input></template>
        </RiskTable>
    </div>
</template>
<script lang="ts">
import { ColumnVO, PageVO, TableConfigVO } from '@/common/vo';
import { jumpRouter } from '@/utils/tools';
import { Component, Vue } from 'vue-property-decorator';
import API from '../../api/index';
import RiskTable from '@/common/components/risk-table-plus.vue';

@Component({ name: 'O32EntryRecord', components: { RiskTable } })
export default class O32EntryRecord extends Vue {
    tableLoading: boolean = false;
    tableData: any[] = [];
    tableConfig: TableConfigVO = {
        rowKey: '_YH条目编码', // 主键key
        allRowKeys: [], // 所有页数据的key集合
    };
    columns: ColumnVO[] = [
        {
            field: '_O32条目编码',
            title: 'O32条目编码',
            sortable: true,
            sortField: '',
            filterType: 'search',
            filters: [{ data: '' }],
            minWidth: '150px',
        },
        {
            field: '_YH条目编码',
            title: 'YH条目编码',
            sortable: true,
            sortField: '',
            filterType: 'search',
            filters: [{ data: '' }],
            minWidth: '150px',
        },
        {
            field: '_风险说明',
            title: '风险说明',
            sortable: true,
            sortField: '',
            filterType: 'search',
            filters: [{ data: '' }],
            minWidth: '150px',
        },
        {
            field: '_调整大类',
            title: '调整大类',
            sortable: true,
            sortField: '',
            filterType: 'search',
            filters: [{ data: '' }],
            minWidth: '150px',
        },
        {
            field: '_操作类型',
            title: '操作类型',
            sortable: true,
            sortField: '',
            filterType: 'funnel',
            filters: [{ label: 'label', value: 'value' }],
            minWidth: '150px',
        },
        {
            field: '_详细变更内容',
            title: '详细变更内容',
            sortable: true,
            sortField: '',
            filterType: 'search',
            filters: [{ data: '' }],
            minWidth: '150px',
        },
        {
            field: '_变更原因',
            title: '变更原因',
            sortable: true,
            sortField: '',
            filterType: 'search',
            filters: [{ data: '' }],
            minWidth: '150px',
        },
        {
            field: '_操作人',
            title: '操作人',
            sortable: true,
            sortField: '',
            filterType: 'search',
            filters: [{ data: '' }],
            minWidth: '150px',
        },
        {
            field: '_操作时间',
            title: '操作时间',
            sortable: true,
            sortField: '',
            minWidth: '150px',
        },
    ];
    tableKey: number = 0;
    paging: PageVO = { pageSize: 25, currentPage: 1, total: 0 };

    searchParams: any = {
        _O32条目编号: '',
        _YH条目编号: '',
        _风险说明: '',
        _调整大类: '',
        _变更人: '',
        _变更日期start: '',
        _变更日期end: '',
        _变更日期: [],
        _操作类型: [],
        _详细变更内容: '',
        _变更原因: '',
        _操作人: '',
    };

    exportVisible: boolean = false;
    exportParams: any = { exportFileName: '映射关系总览信息' };

    mounted() {
        this.getTableData();
    }

    getTableData(): void {
        this.tableLoading = true;

        API.getComplianceOverview({ ...this.searchParams, paging: this.paging })
            .then((res: any) => {
                this.tableData = res.list || [];
            })
            .finally(() => {
                this.tableLoading = false;
                this.tableData = [
                    {
                        id: '1',
                        sourceType: '法律法规',
                        sourceGroup: '证监会',
                        sourceCode: 'LY046',
                        sourceName: '中国证券登记结算指引',
                        sourceVision: '2023版',
                        sourceStatus: '生效',
                        termCode: 'TK091',
                        termName: '所有年金正回购不超过净值...',
                        O32EntryCode_: '30',
                        O32EntryName_: '所有年金正回购不超过净值...',
                        O32EntryStatus: '启用',
                        YhEntryCode_: '12',
                        YhEntryName_: '所有年金正回购不超过净值...',
                        YhEntryStatus: '启用',
                        lastAdjustTime: '2023-09-12 11:00:01',
                    },
                    {
                        id: '2',
                        sourceType: '法律法规',
                        sourceGroup: '上交所',
                        sourceCode: 'LY047',
                        sourceName: '中国证券登记结算指引',
                        sourceVision: '2023版',
                        sourceStatus: '生效',
                        termCode: 'TK092',
                        termName: '所有年金正回购不超过净值...',
                        O32EntryCode_: '31',
                        O32EntryName_: '所有年金正回购不超过净值...',
                        O32EntryStatus: '启用',
                        YhEntryCode_: '13',
                        YhEntryName_: '所有年金正回购不超过净值...',
                        YhEntryStatus: '启用',
                        lastAdjustTime: '2023-09-12 11:00:01',
                    },
                    {
                        id: '3',
                        sourceType: '法律法规',
                        sourceGroup: '上交所',
                        sourceCode: 'LY047',
                        sourceName: '中国证券登记结算指引',
                        sourceVision: '2023版',
                        sourceStatus: '生效',
                        termCode: 'TK098',
                        termName: '所有年金正回购不超过净值...',
                        O32EntryCode_: '32',
                        O32EntryName_: '所有年金正回购不超过净值...',
                        O32EntryStatus: '启用',
                        YhEntryCode_: '14',
                        YhEntryName_: '所有年金正回购不超过净值...',
                        YhEntryStatus: '启用',
                        lastAdjustTime: '2023-09-12 11:00:01',
                    },
                    {
                        id: '3',
                        sourceType: '法律法规',
                        sourceGroup: '上交所',
                        sourceCode: 'LY047',
                        sourceName: '中国证券登记结算指引',
                        sourceVision: '2023版',
                        sourceStatus: '生效',
                        termCode: 'TK098',
                        termName: '所有年金正回购不超过净值...',
                        O32EntryCode_: '33',
                        O32EntryName_: '所有年金正回购不超过净值...',
                        O32EntryStatus: '启用',
                        YhEntryCode_: '15',
                        YhEntryName_: '所有年金正回购不超过净值...',
                        YhEntryStatus: '启用',
                        lastAdjustTime: '2023-09-12 11:00:01',
                    },
                ];
            });
    }

    handleBtnClick(operation): void {
        if (operation === 'search') {
            this.getTableData();
        } else if (operation === 'reset') {
        } else if (operation === 'export') {
            this.exportVisible = true;
        }
    }

    goToRouter(): void {
        jumpRouter({
            title: '投资风险设置',
            path: '/risk/setting/itemSetting',
            type: '0', // 0-内部 1-外部 (内部是指 待跳转页面代码 在这套vue里)
            params: { entryCode: 'YH001' }, // string | any 需要带进跳转页面的参数
        });
    }

    // 通用行合并函数（将相同多列数据合并为一行）
    rowspanMethod({ row, _rowIndex, column, visibleData }) {
        console.log(row, _rowIndex, column, visibleData);
        const fields = ['sourceType', 'sourceGroup', 'sourceCode', 'termCode'];
        let field = column.property;
        if (['sourceStatus', 'sourceVision', 'sourceName'].includes(field)) {
            field = 'sourceCode';
        } else if (field == 'termName') {
            field = 'termCode';
        }
        const cellValue = row[field];
        if (cellValue && fields.includes(field)) {
            const prevRow = visibleData[_rowIndex - 1];
            let nextRow = visibleData[_rowIndex + 1];
            if (prevRow && prevRow[field] === cellValue) {
                return { rowspan: 0, colspan: 0 };
            } else {
                let countRowspan = 1;
                while (nextRow && nextRow[field] === cellValue) {
                    nextRow = visibleData[++countRowspan + _rowIndex];
                }
                if (countRowspan > 1) {
                    return { rowspan: countRowspan, colspan: 1 };
                }
            }
        }
    }
}
</script>
<style lang="scss" scoped>
#o32-entry-record {
    height: 100%;
    min-width: 1350px;
    padding: 0 10px;

    .yh-question {
        font-weight: bold;
        padding: 0 5px;
    }

    .my-input {
        margin: 10px;
        width: 150px;
    }
}

/*** required 红点 ***/
/deep/ .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
    content: '*' !important;
    margin-right: 2px !important;
    color: red;
}

/deep/ .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:after {
    display: none;
}

/*** required 红点 ***/

.long-select {
    /deep/ .el-input__inner {
        height: 28px;
        padding-top: 5px;
    }
}
</style>
<style>
.custom-span {
    background-color: #fff !important;
}
</style>
